<!-- 频道编辑组件 -->
<template>
  <div class="channel-edit-wrap">
    <van-cell title="我的频道" :border='false'>
        <template #value>
            <van-button type="primary" round size='small'
             @click="onclickEdit">{{isEdit? '完成':'编辑'}}</van-button>
        </template>
    </van-cell>
    <van-grid :gutter="10">
        <van-grid-item v-for="(item,index) in channels"
         @click="onMyChannelClick(item,index)"
         class="grid-item define-icon"
         :key="index" :text="item.name" :class="{active:index===active}">
          <template #icon>
            <van-icon name="clear" v-if="isEdit && !fixedChannels.includes(item.id)"/>
          </template>
        </van-grid-item>
    </van-grid>
    <van-cell title="频道推荐" :border='false'>
    </van-cell>
    <van-grid :gutter="10"  direction='horizontal'>
        <van-grid-item v-for="(item,index) in recommendChannels" :key="index"
        icon="plus" :text="item.name" class="grid-item" @click="addChannel(item)"/>
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channelEdit.js'
export default {
  name: 'ChannelEdit',
  props: {
    channels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    },
    // 控制关闭图标
    isEdit: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      allChannels: [], // 全部频道列表
      fixedChannels: [0] // 编辑时不可删除的频道，储存它的id值,不希望用户删除的频道将id储存在这里
    }
  },
  computed: {
    recommendChannels () {
      const currentChannels = []
      this.allChannels.forEach(item => {
        const result = this.channels.find(value => {
          return value.id === item.id
        })
        if (!result) {
          currentChannels.push(item)
        }
      })
      return currentChannels
    }
  },
  created () {
    this.localAllChannels()
  },
  methods: {
    async localAllChannels () {
      try {
        const res = await getAllChannels()
        this.allChannels.push(...res.data.data.channels)
        // console.log(this.allChannels)
      } catch (error) {
        this.$toast('请求全部频道列表失败')
      }
    },
    // 点击我的频道里面的单元格触发的事件
    async onMyChannelClick (channel, index) {
      // 判断是否处于编辑状态，不同状态执行的事件不一样
      if (this.isEdit) {
        // 编辑状态
        this.$emit('delete-myChannels', index)
        try {
          await deleteUserChannel(channel.id) // 请求接口删除用户关注列表
        } catch (error) {
          console.log(error)
        }
      } else {
        // 非编辑状态,点击跳转到首页相应的频道
        this.$emit('update-active', index)
      }
    },
    async addChannel (channel) {
      // 更新父组件中的用户关注频道列表从而更新props中的channels
      this.$emit('update-myChannels', channel)
      try {
        await addUserChannel({
          id: channel.id,
          seq: this.channels.length + 1
        })
      } catch (error) {
        console.log(error)
      }
    },
    onclickEdit () {
      this.$emit('updata-edit')
    }
  }
}
</script>

<style  scoped lang='less'>
.channel-edit-wrap {
  padding: 85px 0 0 0;
  .van-cell {
    /deep/.van-cell__title {
        display: flex;
        justify-content: left;
        align-items: center;
        span.van-grid-item__text {
            font-size: 32px ;
            color: #333333;
        }
    }
  }
  /deep/.van-cell__value {
    display: flex;
    justify-content: right;;
    align-items: center;
    .van-button {
        background-color: rgb(218, 84, 106);
        border:none;
        width: 104px;
        height: 46px;
    }
  }
  /deep/.grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f4f5f6;
      i.van-badge__wrapper {
          font-size: 24px;
      }
      .van-grid-item__text {
        font-size: 28px;
        color: #222 ;
      }
    }
  }
  /deep/.define-icon {
    .van-badge__wrapper {
      position: unset;  // 使用插槽会有一个包裹盒子
    }
    i.van-badge__wrapper {
      font-size: 30px !important;
      position: absolute;
      right: -15px;
      top: -15px;
      z-index: 9;
      color: rgb(150, 146, 146);
    }
    span.van-grid-item__text {
        margin-top: 0;
    }
  }
  /deep/.active {
    span.van-grid-item__text {
        color: rgb(238, 21, 50) !important;
    }
  }
}
</style>
